<?php
session_start();
require_once("User.php");
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Battle of the mages</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style/style.css" />
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<script type="text/javascript" src="scripts/script.js"></script>
    </head>
<body onload="onLoadLogin();">
	<header class="header">
		<h1>Battle of the Mages</h1>
		<img alt="Battle of the Mages Logo" src="images/botm_logo.png" id="logo" width="572px" height="334px"/>
	</header>
	<section id="main_section" style="background-image: url('images/botm_bg_home.png');">
	<img src="images/botm_border.png" alt="border" id="border" width="1437px" height="1573px"/>
		<div id="login_form">
		<?php
		if(isset($_SESSION['user'])){
			$user = unserialize($_SESSION['user']);
			$username = $user->getUsername();
		}else{
			$username = "";
		}
		?>
			<form method="post" id="loginForm">
				<h2 id="login_title">Login</h2>
				<div id="message"></div>
				<input type="text" placeholder="Enter Your Username" id="username" class="text shadow" name="username" value="<?php echo $username;?>"/>
				<input type="password" placeholder="Enter Your Password" id="password" class="text shadow" name="password"/>
				<input type="image" src="images/botm_login.png" id="login" width="40px" height="60px"/>
				<input type="image" src="images/botm_register.png" id="register_button" width="120" height="60"/>
			</form>
		</div>
	</section>
	<footer>
		<ul id="footer_nav">
			<li><img src="images/botm_home.png"/></li>
			<li><img src="images/botm_howtoplay.png"/></li>
			<li><img src="images/botm_aboutus.png"/></li>
		</ul>
	</footer>
</body>
</html>